<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <script src="../jquery.1.11.1.min.js"></script>
    <link rel="stylesheet" href="../bs/css/bootstrap.min.css">
</head>

<body>
    <div id="app">
        <form>
            <div class="form-group">
                <label for="exampleInputEmail1">姓名</label>
                <input type="text" class="form-control" id="name" placeholder="请输入姓名" v-model="name">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">电话</label>
                <input type="text" class="form-control" id="tel" placeholder="请输入电话" v-model="tel">
            </div>

            <button type="button" class="btn btn-info" @click="add" v-show="isOk4">添加</button>
            <button type="button" class="btn btn-info" @click="change1" v-show="isOk5">修改并插入</button>
            <button type="button" class="btn btn-warning" @click="reset">重置</button>

            <table class="table table-bordered">
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>电话</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item, index) in arr">
                    <td>{{ index + 1 }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.tel }}</td>
                    <td>
                        <button type="button" class="btn btn-danger" @click="del(index)">删除</button>
                        <button type="button" class="btn btn-warning" @click="change(index)">修改</button>
                    </td>
                </tr>
                <tr v-show="isOk">
                    <td v-if="isOk">暂无数据</td>
                </tr>
                <tr v-show="isOk1">
                    <td v-if="isOk1"> <button type="button" class="btn btn-danger" @click="delAll">删除全部</button></td>
                </tr>
            </table>
        </form>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                name: "",
                tel: "",
                arr: [],
                isOk: true,
                isOk1: false,
                isOk4: true,
                isOk5: false,
            },
            methods: {
                clear() {
                    this.name = "";
                    this.tel = "";
                },
                update() {
                    this.isOk = this.arr.length === 0;
                    this.isOk1 = !this.isOk;
                },

                add() {
                    this.arr.push({ name: this.name, tel: this.tel });
                    this.clear();
                    this.update();
                },
                reset() {
                    this.clear();
                    this.update();
                },
                del(index) {
                    this.arr.splice(index, 1);
                    this.update();
                },
                change(index) {
                    this.name = this.arr[index].name;
                    this.tel = this.arr[index].tel;
                    this.isOk4 = false;
                    this.isOk5 = true;
                },
                change1() {
                    var change = { name: this.name, tel: this.tel };
                    this.arr.splice(this.getIndex(), 1, change);
                    this.isOk4 = true;
                    this.isOk5 = false;
                    this.clear();
                    this.update();
                },
                delAll() {
                    this.arr = [];
                    this.update();
                },
                getIndex() {
                    return this.arr.findIndex(item => item.name === this.name && item.tel === this.tel);
                }
            }
        });
    </script>

</body>

</html>